
<template>
  <Layout>
    <Form ref="queryForm" :model="dataToQuery" :label-width="120">
      <Row class="query-form" >
        <Col span="8">
          <FormItem label='所属单位：'>
            <cascaderDom   class="query-form-el" ref="groupOrg1" style="width: 100%;"
                           @setOrgInfo='setOrgId'
                           @setOrgname='setOrgName'
                           :orgTree="true" ></cascaderDom>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="通知公告：">
            <Input class="query-form-el" type="text" v-model="dataToQuery.title" @on-focus="querySelect"
                   :readonly="true"></Input>
          </FormItem>
        </Col>


        <Col span="8" v-if="!switchFlag">
<!--          <Button @click="switchQuery(true)" class="ivu-btn-switch" type="text">展开∨</Button>-->
          <Button @click="reseter" class="ivu-btn-reset"  >重置</Button>
          <Button type="primary" class="ivu-btn-query"   icon="md-search"  @click="query">查询</Button>
        </Col>
        <Col span="8" v-else>
          <FormItem label='安全文化示范企业级别：'>
            <Select  multiple v-model="safeLevels">
              <Option v-for="item in safeLevelList" :value="item.codingCodeId"
                      :key="item.codingCodeId">{{ item.codingName }}
              </Option>
            </Select>
          </FormItem>
        </Col>
      </Row>
      <Row class="query-form">
        <Col span="24">
          <Button size="large"  class="ivu-btn-add" icon="md-add"  @click="addInfo">新增</Button>
<!--          <Button type="primary" class="ivu-btn-add" :loading="buttonLoading" icon="md-cloud-download" @click="downloadFile">导出</Button>-->
        </Col>
      </Row>
    </Form>
    <Table ref='table' :height="tableHeight"  no-data-text="没有查询到相关数据!" @on-selection-change = 'getSelectRows' :loading='pageStatus.loading ||  pageStatus.baseLoading'
           border :columns="columns1"  :data="dataTable" >
    </Table>
    <Row style="margin-right:10px;">
      <Col span="24" >
        <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange1" @on-page-size-change="pageSizeChange1" :page-size-opts="pageSizeArray" show-total show-sizer show-elevator />
      </Col>
    </Row>
    <Modal  :title="mode == 'view' ?'会议签到表详情':'会议签到表基本信息'" :transfer=false :mask-closable="false" v-model="dialogShow" v-if="dataToView && dialogShow" :width=800 :styles="{height:'559px'}"  class-name='limit-height-dialog'>
      <Row>
        <Col span="24">
          <Form ref="dataToView" :class="mode === 'view'?'modal-view-detail':'modal-form'" :show-message="false" :model="dataToView" :rules="mode === 'view'?{} :ruleCustom"  :label-position="mode === 'view'?'right':'top'" :label-width="mode === 'view'?160:null">
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="23">
                <FormItem label='所在单位：' prop='orgName'>
                  <div v-if="mode === 'view'">{{ dataToView.orgName }}</div>
                  <Input v-else class=''placeholder="请填写所在单位" type='text' v-model='dataToView.orgName' :readonly="true"></Input>
                </FormItem>
              </Col>

            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="23">
                <FormItem label='通知公告：' prop='noticId'>
                  <div v-if="mode === 'view'">{{ dataToView.title }}</div>
                  <Input v-else class=''placeholder="请填写所在单位" type='text' v-model='dataToView.title'   @on-focus="openSelect" :readonly="true"></Input>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="11">
                <FormItem label='联系人：' prop='contacts'>
                  <div v-if="mode === 'view'">{{ dataToView.userName }}</div>
                  <Input v-else class=''placeholder="请填写联系人" type='text' v-model='dataToView.userName' :readonly="true"></Input>
                </FormItem>
              </Col>
              <Col span="11">
                <FormItem label='联系人电话：' prop='phone'>
                  <div v-if="mode === 'view'">{{ dataToView.phone }}</div>
                  <Input v-else class=''placeholder="请填写联系电话" type='text' v-model='dataToView.phone'></Input>
                </FormItem>
              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg" v-if="mode === 'view'">
              <Col span="11">
                <FormItem label='上报时间：'>
                  <div>{{renderViewDateTime(dataToView.createDate ) }}</div>
                </FormItem>
              </Col>
              <Col span="11">

              </Col>
            </Row>
            <Row type="flex" justify="space-around" class="code-row-bg">
              <Col span="23">
                <FormItem v-if="mode === 'view'" label="签到附件：">
                  <div v-show="dataToView.idFiles.length>0" v-for="item in dataToView.idFiles">
                    <a @click="downloadFile(item)"><span style="color: #3399ff;margin-left: 5px">{{ item.fileName }}</span></a>
                  </div>
                </FormItem>
                <FormItem v-else label="上传签到附件：" prop="id">
                  <div >
                    <Upload ref="upload"
                            :before-upload="(file) => { beforeUpload(file, 'id') }"
                            :show-upload-list="true"
                            :max-size="10240"
                            multiple
                            type="drag"
                            :action="fileUrl">
                      <div style="padding: 20px">
                        <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                        <p>点击将文件拖拽到这里上传</p>
                      </div>
                    </Upload>
                  </div>
                  <div v-show="dataToView.idFiles.length>0" v-for="item in dataToView.idFiles">
                    <a @click.prevent="downloadFile(item)">{{item.fileName}}</a>
                    <Button type="text" icon="md-trash" @click="removeFile(item.id, 'id')"
                            style="margin-left: 20px;margin-bottom: 3px"/>
                  </div>
                </FormItem>
              </Col>
            </Row>
          </Form>
        </Col>
      </Row>
      <div slot="footer">
        <Button v-if="mode != 'view'" type="primary"  class='ivu-btn-save' @click="submit('dataToView')" >确定</Button>
        <Button v-if="mode != 'view'" type="primary"  class='ivu-btn-cancel' @click="handleCancel" >取消</Button>
        <Button v-if="mode === 'view'" class='ivu-btn-save' @click="dialogShow=false">关闭</Button>
      </div>
    </Modal>
    <Modal title="选择通知公告" :transfer=false footer-hide v-model="standardSelectModal" :width=900>
      <noticeSelect ref="selMission" @selectMission="selectReceipt" :is-select="true">
      </noticeSelect>
    </Modal>
    <Modal title="选择通知公告" :transfer=false footer-hide v-model="queryMeetingSelectModal" :width=900>
      <noticeSelect ref="selQueryMission" @selectMission="queryMetting" :is-select="true">
      </noticeSelect>
    </Modal>
  </Layout>
</template>

<script>
import {Api} from '@/api/index.js'
import noticeSelect from "@/views/safe/receipt/NoticeSelect.vue"
import {sessionStorage} from '@/common/cacheUtils.js';
import {formatDate} from '@/tools/index'
import pageCommonFunction from '@/components/pageCommonFunction.js'

var cascaderDom = () => import('@/components/cascader-dom.vue');
export default {
  components: {
    cascaderDom, noticeSelect
  },
  computed: {},
  data() {
    return {
      ...this.createCommonDataField(),
      queryMeetingSelectModal:false,
      switchFlag:false,
      columns1: [
        { title: '序号', width: 80, fixed: 'left', align: 'center', render: this.indexColumnsRender},
        { key:'title',title: '通知公告',minWidth: 150,  align: 'center' },
        { key:'orgName',title: '所属单位',minWidth: 150,  align: 'center' },
        { key:'userName',title: '联系人', minWidth: 150, align: 'center'},
        { key:'phone',title: '电话号', minWidth: 150, align: 'center' },
        this.getActionColumns()
      ],
      ruleCustom : {
        noticId: [{
          validator: (rule, value, callback) => {
            if (this.dataToView.noticId == null || this.dataToView.noticId == undefined || this.dataToView.noticId == '') {
              callback(' ')
            } else {
              callback()
            }
          },
          required: true,
          trigger: 'change'
        }],
        orgName: [ { required: true, message: '请填写企业名称', trigger: 'change',}],
        contacts: [ { required: true, message: '请填写联系人', trigger: 'change',}],
        phone: [ {pattern:/^1[3456789]\d{9}$/, required: true, message: '请填写手机号', trigger: 'change',}],

      },
      tableHeight:10,
      industryList:[],
      safeLevelList:[],
      twoOrgInfo:[],
      // api
      standardSelectModal:false,
      queryUrl:Api.queryMeetingAttendance,
      deleteUrl:Api.deleteMeetingAttendance,
      updateUrl:Api.updateMeetingAttendance,
      saveUrl:Api.saveMeetingAttendance,
      buttonLoading:false
    }
  },
  async mounted() {
    this.dataToQuery ={};
    this.setTableHeight();
    this.query();
  },
  methods:{

    ...pageCommonFunction,

    openSelect() {
      this.standardSelectModal = true

    },
    deleteData(params) {
      this.deleteDateById(params.row.id);
    },
    switchQuery(flag) {
      this.switchFlag = flag;
      if (!this.switchFlag) {
        this.tableHeight = this.tableHeight + 44;

      } else {
        this.tableHeight = this.tableHeight - 44;
      }

    },
    setOrgId(data) {
      this.dataToQuery.affiliatedUnits = data[data.length - 1];
    },
    setOrgName(data) {

    },
    query() {
      this.dataToQuery.meetingType = "1"
      this.query1()
    },
    submit(name) {
      this.dataToView.meetingType = "1"
      this.submitBase(name);
    },
    createEmptyDataToAdd() {
        return{
          id:this.get_uuid(),
          affiliatedUnits:sessionStorage('userId').getObject('userId').companyId,
          orgName:sessionStorage('userId').getObject('userId').companyName,
          userName:sessionStorage('userId').getObject('userId').userName,
          contacts:sessionStorage('userId').getObject('userId').userId,
        }
    },
    reseter() {
      this.dataToQuery = {};
      this.dataToQuery.meetingType = "1"
      this.$refs.groupOrg1.resetCurrentOrg();
      this.query1()
    },
    renderViewDateTime(date) {
      if (!date) return "";
      return formatDate(new Date(date), "yyyy-MM-dd hh:mm:ss");
    },
    downloadFiles() {
      this.buttonLoading=true
      let orgId = sessionStorage('userId').getObject('userId').companyId
      let data = {
        orgId:orgId,
      };
      this.dataToQuery.safeLevels ="";
      this.dataToQuery.safeRanks ="";

      this.safeRanks.forEach(item =>{

        this.dataToQuery.safeRanks += item+","
      });
      this.safeLevels.forEach(item =>{

        this.dataToQuery.safeLevels += item+","
      });
      data = Object.assign(data, JSON.parse(JSON.stringify(this.dataToQuery)));
      this.$http.get(Api.downloadEnvInfoCompan, {
        params:data,
        responseType: 'blob'      //告诉服务器我们需要的响应格式
      }).then((res) => {
        const aLink = document.createElement("a");
        let blob = new Blob([res.data], {
          type: res.bodyBlob.type      //将会被放入到blob中的数组内容的MIME类型
        });
        aLink.href = URL.createObjectURL(blob)
        aLink.download = "企业基本信息("+formatDate(new Date(), "yyyy-MM-dd")+").xlsx" //标题
        aLink.click()
        document.body.appendChild(aLink)
        this.buttonLoading=false
      })
    },
    selectReceipt(row){
      this.standardSelectModal = false;
      this.dataToView.noticId = row.proposalId;
      this.dataToView.title = row.title;
    },
    querySelect(){
      this.queryMeetingSelectModal = true;
    },
    queryMetting(row){
      this.queryMeetingSelectModal = false;
      this.dataToQuery.noticId = row.proposalId;
      this.dataToQuery.title = row.title;
    },
    async afterDataToViewInit() {

      await this.getFiles('id');

    },

  },
  watch:{

  },

}
</script>

<style lang='css' scoped>
@import '../../../../index.css';
</style>
